<template>
	<view class="details">
		<view class="details_ul">
			<view class="details_li">
				<text>患者姓名:</text>
				<text>{{data.patient.name}}</text>
			</view>
			<view class="details_li">
				<text>性 别:</text>
				<text>{{data.patient.gender == 1?'男':'女'}}</text>
			</view>
			<view class="details_li">
				<text>年 龄:</text>
				<text>{{data.patient.age}}</text>
			</view>
			<view class="details_li">
				<text>联系方式:</text>
				<text>{{data.patient.tel}}</text>
			</view>
			<view class="details_li">
				<text>接诊医生:</text>
				<text>{{data.reservation.name}}</text>
			</view>
			<view class="details_li">
				<text>接诊时间:</text>
				<text>{{data.reservation.visitTime}}</text>
			</view>
			<view class="details_li">
				<text>座机号:</text>
				<text>{{data.patient.fixPhone}}</text>
			</view>
			<view class="details_li">
				<text>地址:</text>
				<text>{{data.patient.address}}</text>
			</view>
		</view>
		<view class="totalDrug">
			<view class="totalDrug_title">
				药品统计
			</view>
			<ul class="totalDrug_item">
				<li class="drugType" v-for="item in data.prescriptions" :key="item.id">
					{{typeName(item.rxType)}}:&nbsp;&nbsp;&nbsp;({{item.details?.length}}种)
				</li>
			</ul>
		</view>
		<view class="drug_box" v-for="item in data.prescriptions" :key="item.id">
			<checkbox-group class="totalDrug_title" @change="AllcheckboxChange(item.id)">
				<checkbox v-if="data.reservation.dispensing == 1" color="deepskyblue" :value="item.id"
					:checked="item.isSelected" />
				<text></text>
				<view>{{typeName(item.rxType)}}</view>
			</checkbox-group>
			<view class="Drug_item" v-for="y in item.details" :key="y.id">
				<checkbox v-if="data.reservation.dispensing == 1" @click="checkboxChange(y.id,y.prescriptionId)"
					:value="y.id" color="deepskyblue" :checked="y.isSelected" />
		
				<view class="drug_text">
					<view class="drug_text_title">
						<text v-if="data.reservation.dispensing != 1"
							:class="['dispensing',data.reservation.dispensing == 2?'green':'red']">{{data.reservation.dispensing == 2?'已发':'已退'}}</text>
						<text class="name">{{y.name}}</text>
						<text class="lable">零售价：</text>
						<text class="money">￥{{y.pric}}</text>
					</view>
					<view class="drug_text_desc">
						<text>{{y.amt}}/{{y.unit}}</text>
						<text>{{y.manufacturer}}</text>
					</view>
				</view>
				<view class="drug_number">
					{{y.cnt}}{{y.unit}}
				</view>
			</view>
		</view>

		<view class="operation_history">
			<view class="Controls_title">
				操作
			</view>
			<ul class="Controls">
				<li class="Controls_item" v-for="item in data.ControlsList" :key="item">
					<text>{{item}}</text>
				</li>
			</ul>
		</view>
		<view class="drugbox"></view>
		<view class="footer" v-if="data.reservation.dispensing != 3">
			<view :class="['footer_btn',{'red':data.reservation.dispensing == 2}]"
				@click="dialogToggle(data.reservation.dispensing)">
				{{ data.reservation.dispensing == 1?'发药':'退药'}}
			</view>
		</view>

		<uni-popup ref="popup" class="withdrawal" :mask-click="false">
			<view class="popup-content">
				<div class="popup_title">退药</div>
				<view class="drug_box1" v-for="item in data.prescriptions" :key="item.id">
					<checkbox-group class="totalDrug_title" @change="AllcheckboxChange(item.id)">
						<checkbox color="deepskyblue" :value="item.id" :checked="item.isSelected" />
						<text>{{typeName(item.rxType)}}</text>
					</checkbox-group>
					<view class="Drug_item" v-for="y in item.details" :key="y.id">

						<view class="withdrawal_box">
							<checkbox @click="checkboxChange(y.id,y.prescriptionId)" :value="y.id" color="deepskyblue"
								:checked="y.isSelected" />
							<view class="drug_text">
								<view class="drug_text_title">
									<text v-if="data.reservation.dispensing != 1"
										:class="['dispensing',data.reservation.dispensing == 2?'green':'red']">{{data.reservation.dispensing == 2?'已发':'已退'}}</text>
									<text class="name">{{y.name}}</text>
									<text class="lable">零售价：</text>
									<text class="money">￥{{y.pric}}</text>
								</view>
								<view class="drug_text_desc">
									<text>{{y.amt}}/{{y.unit}}</text>
									<text>{{y.manufacturer}}</text>
								</view>
							</view>
							<view class="drug_number">
								{{y.cnt}}{{y.unit}}
							</view>
						</view>
						<view class="input_num">
							<view class="odd_numbers">
								<text class="lable">货位号：</text>
								<text class="money">{{y.drugId || '--'}}</text>
							</view>
							<view class="withdrawal_num">
								<text>退货数量：</text>
								<input :class="['uni-input',!y.isSelected?'disabled-input':'']" v-model="y.returnNum"
									:disabled="!y.isSelected" placeholder="" />
								<text>{{y.unit}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="popup_btn">
					<view class="close" @click="popup.close()">
						取消
					</view>
					<view class="enter" @click="withdrawalEnter">
						退药
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" :title="data.dialogTitle"
				@confirm="dialogConfirm" @close="alertDialog.close()">
				<ul class="totalDrug_item">
					<li class="drugType" v-for="item in data.prescriptions" :key="item.id">
						{{typeName(item.rxType)}}:&nbsp;&nbsp;&nbsp;({{item.details?.length}}种)
					</li>
				</ul>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		getDrugDatails,
		SetDispensing,
		DeteleDispensing
	} from "@/api/dispensing/index.js"
	import {
		ref,
		reactive,
		onMounted,
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((option) => {

		data.query.id = option.id
		data.query.patientId = option.patientId
	})
	const alertDialog = ref()
	const popup = ref()
	const data = reactive({
		dialogTitle: '',
		parentId: '',
		query: {},
		patient: {},
		reservation: {},
		prescriptions: [],
		ControlsList: []
	})
	onMounted(() => {
		getDatails()
	})
	// 获取详情
	const getDatails = async () => {
		console.log(data.query);
		await getDrugDatails(data.query).then((res) => {
			if (res.code == 200) {
				data.patient = res.data.patient
				data.reservation = res.data.reservation
				data.prescriptions = res.data.prescriptions
				data.ControlsList = res.data.operationDescription
				let title = res.data.reservation.dispensing
				if (title == 2) {
					data.prescriptions.forEach(item => {
						if (item.details.length > 0) {
							item.details.forEach(y => {
								y.returnNum = y.returnableQuantity
							})
						}
					})
				}
				uni.setNavigationBarTitle({
					title: title == 1 ? '待发药详情' : title == 2 ? '已发药详情' : '已退药详情'
				})
			}
		})
	}
	const checkboxChange = (id, parentId) => {
		data.prescriptions.forEach(item => {
			if (item.id == parentId) {
				item.details.forEach(y => {
					if (y.id == id) {
						y.isSelected = !y.isSelected
					}
				})
				item.isSelected = item.details.every(i => i.isSelected)
			}
		})
	}
	const AllcheckboxChange = (id) => {
		data.prescriptions.forEach(item => {
			if (item.id == id) {
				item.isSelected = !item.isSelected
				if (item.details.length > 0) {
					item.details.forEach(y => {
						y.isSelected = item.isSelected
					})
				}
			}
		})
	}
	const dialogToggle = (type) => {
		if (type == 1) {
			let bool = false
			data.prescriptions.forEach(item => {
				if (item.isSelected) {
					bool = true
					return
				}
				if (item.details.length > 0) {
					item.details.forEach(y => {
						if (y.isSelected) {
							bool = true
							return
						}
					})
				}
			})
			if (!bool) {
				uni.showToast({
					title: '请选择药品',
					duration: 2000,
					icon: 'error'
				})
				return
			}
			data.dialogTitle = '发药提醒'
			alertDialog.value.open()
		} else {
			popup.value.open('bottom')
		}

	}
	const withdrawalEnter = () => {
		let bool = false
		data.prescriptions.forEach(item => {
			if (item.isSelected) bool = true
			if (item.details.length > 0) {
				item.details.forEach(y => {
					if (y.isSelected) bool = true
				})
			}
		})
		if (!bool) {
			uni.showToast({
				title: '请选择退货药品',
				duration: 2000,
				icon: 'error'
			})
			return
		}
		data.dialogTitle = '退药提醒'
		alertDialog.value.open()
	}
	const dialogConfirm = async () => {
		let query = {
			id: data.query.id,
			prescriptions: data.prescriptions
		}
		let res = null
		if (data.reservation.dispensing == 1) res = await SetDispensing(query)
		else res = await DeteleDispensing(query)
		if (res.code == 200) {
			uni.showToast({
				title: data.reservation.dispensing == 1 ? '发药成功！' : '退药成功！',
				duration: 2000,
				icon: 'error'
			})
			uni.navigateTo({
				url: `/pages/dispensing/index`,
				animationType: 'pop-out',
				animationDuration: 200
			})
		}
	}
	const typeName = (value) => {
		if(value == 1){
			return '西药中成药'
		}else if(value == 2){
			return '注射用药'
		}else if(value == 3){
			return '器械'
		}else if(value == 4){
			return '中药饮片'
		}else if(value == 5){
			return '中药超微颗粒'
		}else if(value == 6){
			return '中药配方颗粒'
		}else if(value == 7){
			return '中药敷贴'
		}else if(value == 8){
			return '检验治疗'
		}else if(value == 9){
			return '附加费用'
		}else if(value == 10){
			return '其它'
		}else {
			return '其他'
		}
	}
</script>

<style lang="scss" scoped>
	.details {
		width: 100%;
		height: 100vh;
		background-color: #f3f3f3;
		.details_ul {
			display: flex;
			flex-wrap: wrap;

			.details_li {
				width: 55%;
				line-height: 70rpx;
				background-color: #ffffff;
				margin-bottom: 1rpx;
				padding-left: 15rpx;
				box-sizing: border-box;
				font-size: 26rpx;

				&:nth-child(odd) {
					width: 45%;
				}

				text {
					&:last-child {
						margin-left: 10rpx;
					}
				}
			}
		}

		.totalDrug,
		.drug_box {
			width: 100%;
			margin: 10rpx 0rpx;
			background-color: #fff;
			padding: 0rpx 10rpx;
			box-sizing: border-box;

			.totalDrug_title {
				line-height: 80rpx;
				border-bottom: 1rpx solid #f1f1f1;
				font-size: 26rpx;
			}

			.drugType {
				line-height: 80rpx;
				font-size: 26rpx;
				color: #888888;
			}

			.Drug_item {
				padding: 20rpx 0rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;

				checkbox {
					transform: scale(0.7)
				}

				.drug_text {
					.drug_text_title {
						.dispensing {
							font-size: 22rpx;
							padding: 6rpx;
							border-radius: 6rpx;
							color: #FFFFFF;
						}

						.green {
							background-color: limegreen;
						}

						.red {

							background-color: red;
						}

						.name {
							font-weight: 700;
							padding: 0rpx 15rpx;
						}

						.lable {
							color: #888888;
							padding: 0rpx 8rpx;
						}

						.money {
							color: red;
						}
					}

					.drug_text_desc {
						margin-top: 8rpx;
						color: #888888;

						text:last-child {
							margin-left: 10rpx;
						}
					}
				}

				.drug_number {
					flex: 1;
					text-align: right;
					color: red;
				}
			}
		}

		.drug_box {

			.totalDrug_title {
				height: 80rpx;
				line-height: unset;
				display: flex;
				align-items: center;
				color: deepskyblue;

				checkbox {
					transform: scale(0.7)
				}

				text {
					display: block;
					width: 4rpx;
					height: 30rpx;
					background-color: deepskyblue;
					margin-right: 15rpx;
				}
			}
		}

		.operation_history {
			width: 100%;
			margin: 10rpx 0rpx;
			background-color: #fff;
			padding: 0rpx 10rpx;
			box-sizing: border-box;

			.Controls_title {
				line-height: 80rpx;
				border-bottom: 1rpx solid #f1f1f1;
				font-size: 26rpx;
			}

			.Controls {
				.Controls_item {
					height: 80rpx;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					color: #888888;

					text {
						flex: 1;

						&:nth-child(1) {
							flex: 2;
						}
					}
				}
			}
		}
		.drugbox{
			height: 100rpx;
		}
		.footer {
			width: 100%;
			background-color: #fff;
			height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;

			.footer_btn {
				width: 170rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				background-color: deepskyblue;
				color: #fff;
				border-radius: 10rpx;
				margin-left: auto;
				font-size: 28rpx;
			}

			.red {
				background-color: red;
			}
		}

		::v-deep.uni-popup-dialog {
			.uni-dialog-content {
				justify-content: left;
			}
		}

		::v-deep.withdrawal {
			.popup-content {
				max-height: 80vh;
				padding-bottom: 110rpx;
			}
		}

		.popup_title {
			line-height: 80rpx;
			text-align: center;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			border-bottom: 1rpx solid #c1c1c1;
		}

		.drug_box1 {
			width: 100%;
			margin: 10rpx 0rpx;
			background-color: #fff;
			padding: 0rpx 10rpx;
			box-sizing: border-box;
			margin: 0;

			.totalDrug_title {
				line-height: 80rpx;
				border-bottom: 1rpx solid #f1f1f1;
				font-size: 26rpx;
			}

			.drugType {
				line-height: 80rpx;
				font-size: 26rpx;
				color: #888888;
			}

			checkbox {
				transform: scale(0.7)
			}

			.Drug_item {
				padding: 20rpx 0rpx;
				font-size: 26rpx;

				.withdrawal_box {
					display: flex;
					align-items: center;
					padding-bottom: 15rpx;

					.drug_text {
						.drug_text_title {
							.dispensing {
								font-size: 22rpx;
								padding: 6rpx;
								border-radius: 6rpx;
								color: #FFFFFF;
							}

							.green {
								background-color: limegreen;
							}

							.red {

								background-color: red;
							}

							.name {
								font-weight: 700;
								padding: 0rpx 15rpx;
							}

							.lable {
								color: #888888;
								padding: 0rpx 8rpx;
							}

							.money {
								color: red;
							}
						}

						.drug_text_desc {
							margin-top: 8rpx;
							color: #888888;

							text:last-child {
								margin-left: 10rpx;
							}
						}
					}

					.drug_number {
						flex: 1;
						text-align: right;
						color: red;
					}
				}

				.input_num {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-left: 50rpx;
					padding-top: 15rpx;
					border-top: 1rpx solid #f1f1f1;

					.withdrawal_num {
						display: flex;
						align-items: center;

						.uni-input {
							width: 80rpx;
							text-align: center;
							border-bottom: 1rpx solid #888888;
							margin-right: 10rpx;
						}

						.disabled-input {
							color: #c1c1c1;
							border-bottom: 1rpx solid #f1f1f1;
						}
					}
				}

			}
		}

		.popup_btn {
			width: 100%;
			position: fixed;
			bottom: 0rpx;
			left: 0rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 10rpx solid #f1f1f1;
			padding: 15rpx 0rpx;

			view {
				width: 45%;
				font-size: 28rpx;
				line-height: 70rpx;
				text-align: center;
				border: 1rpx solid deepskyblue;
			}

			.close {
				color: deepskyblue;
			}

			.enter {
				color: #fff;
				background-color: deepskyblue;
				margin-left: 20rpx;
			}
		}
	}
</style>